---
title: Exemplos
description: Exemplos de antes e depois do Ultracite em ação.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Automatic Code Formatting

### Before (messy formatting)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

In this code, spacing and concatenation style are off. It’s also using string concatenation instead of template literals, and has double quotes mixed with single quotes.

### After (formatted)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

O formatador do Ultracite fez:

- Formatou a função com quebras de linha apropriadas para legibilidade.
- Converteu a concatenação de strings em um *template literal* (isto pode ser uma correção automática de uma regra de lint que sugere strings template para melhor legibilidade).
- Padronizou as aspas para backticks no template (e usaria aspas duplas de forma consistente em outros lugares, se não fosse um template).
- Adicionou um ponto e vírgula no final da instrução `return`.
- Garantiu espaçamento apropriado ao redor de chaves e parênteses.

O desenvolvedor não reformatou o código manualmente – apenas salvou o arquivo, e o Ultracite tratou do resto. O resultado é um código mais limpo e consistente.

O Ultracite também avisará que `name` está sem tipo e sugerirá adicionar um tipo.

## Enforcing Strict Equality

### Before (potential bug with loose equality)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Aqui, o código está usando igualdade frouxa (`==`) para comparar `response.status` com `200`. Usar igualdade frouxa pode ser propenso a erros devido à coerção de tipos (por exemplo, `response.status` poderia ser uma string `"200"` e ainda assim passar). As regras estritas do Ultracite provavelmente impõem o uso de `===` para comparações.

### After (Ultracite auto-fix applied)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

O Ultracite substituiu automaticamente `== 200` por `=== 200`. Essa pequena alteração previne bugs sutis. A correção foi aplicada ao salvar como parte das ações `source.fixAll.biome`. Uma regra assim (semelhante à `eqeqeq` do ESLint) garante que os desenvolvedores usem verificação de igualdade estrita.

Adicionalmente, o Ultracite também avisará que `isValid` nunca é usado, e sugerirá removê-lo.

## Organizing and Cleaning Imports

### Before (unorganized imports)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

As importações aqui estão fora de ordem alfabética, e a importação `helper` nunca é utilizada no ficheiro.

### After (after save with Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

O Ultracite (via o recurso organize imports do Biome) ordenou as importações alfabeticamente por nome do módulo. Também removeu automaticamente a importação `helper` não utilizada. A diferença entre antes/depois ocorre imediatamente ao salvar, garantindo que a sua seção de importações esteja sempre arrumada:

- **Sem importações não utilizadas** atrapalhando o topo do seu ficheiro.
- **Ordenação determinística** das importações (para que merges e diffs não sejam confundidos por ordens diferentes de importação adicionadas por diferentes desenvolvedores).

Isto leva a um código mais fácil de manter, especialmente em ficheiros com muitas importações.

## Accessibility Fix

### Before

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

O tipo padrão de um botão é `submit`, o que causa o envio de um formulário quando colocado dentro de um elemento `form`. Isso provavelmente não é o comportamento que você quer dentro de uma aplicação React. O Ultracite irá avisá-lo sobre isso e oferecer uma correção rápida para alterar o tipo para `button`.

### After (manual or quick fix)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

O tipo agora é `button`, o que evita que um formulário pai seja enviado quando o botão for clicado.

---

Estes exemplos demonstram como o Ultracite melhora a qualidade do código:

- Consistência de formatação e estilo sem esforço.
- Correções automáticas para muitos problemas comuns (para que raramente tenha de corrigir coisas triviais manualmente).
- Identificação de problemas reais (para que possa corrigi-los cedo no desenvolvimento).

Ao usar o Ultracite, o seu código não só se mantém limpo, como também com menos bugs e mais acessível, graças ao conhecimento coletivo codificado nas suas regras.